<template>
  <div class="login-container">
    <!-- 渐变绿 + 下坠小团动态背景层 -->
    <div class="bg-layer" aria-hidden="true">
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
      <span class="drop"></span>
    </div>
    <div class="login-wrapper">
      <!-- 左侧品牌与说明 -->
      <div class="brand-section">
        <div class="content-wrapper">
          <div class="logo">
            <img src="../../images/1.png" alt="数海领航" class="logo-image" />
          </div>
          <h1 class="brand-title">
            {{ t('login.title') }}
          </h1>
          <div class="brand-subtitle">
            {{ t('login.subtitle') }}
          </div>

          <div class="feature-tabs">
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature1') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature2') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature3') }}
              </div>
            </div>
            <div class="feature-tab">
              <div class="tab-text">
                {{ t('login.feature4') }}
              </div>
            </div>
          </div>
        </div>

        <div class="brand-footer">
          {{ t('login.footer') }}
        </div>
      </div>

      <!-- 右侧注册表单 -->
      <div class="register-form-section">
        <div class="form-header">
          <div class="language-selector">
            <LanguageSelector />
          </div>

          <div class="welcome-text">
            <Translate keyName="register.welcome" />
          </div>
        </div>

        <!-- 注册表单 -->
        <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-position="top">
          <el-form-item prop="username" :label="t('register.username')">
            <el-input
                v-model="registerForm.username"
                :placeholder="t('register.usernamePlaceholder')"
                size="large"
                autocomplete="off"
            />
          </el-form-item>

          <el-form-item prop="phone" :label="t('register.phone')">
            <el-input
                v-model="registerForm.phone"
                :placeholder="t('register.phonePlaceholder')"
                size="large"
                autocomplete="off"
            />
          </el-form-item>

          <el-form-item prop="code" :label="t('register.code')">
            <div class="code-input-wrapper">
              <el-input
                  v-model="registerForm.code"
                  :placeholder="t('register.codePlaceholder')"
                  size="large"
                  autocomplete="off"
              />
              <el-button
                  class="send-code-btn"
                  :disabled="codeBtnDisabled"
                  @click="handleSendCode"
              >
                {{ codeButtonText }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item prop="password" :label="t('register.password')">
            <el-input
                v-model="registerForm.password"
                type="password"
                :placeholder="t('register.passwordPlaceholder')"
                size="large"
                show-password
                autocomplete="new-password"
            />
          </el-form-item>

          <el-form-item prop="confirmPassword" :label="t('register.confirmPassword')">
            <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                :placeholder="t('register.confirmPasswordPlaceholder')"
                size="large"
                show-password
                autocomplete="new-password"
            />
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="agreeTerms">
              {{ t('register.agreement') }}
              <el-link type="primary" @click="$router.push('/terms-of-service')">
                {{ t('register.terms') }}
              </el-link>
              <el-link type="primary" @click="$router.push('/privacy-policy')">
                {{ t('register.privacy') }}
              </el-link>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                class="register-button"
                :loading="loading"
                @click="handleRegister"
            >
              {{ t('register.submit') }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="form-footer">
          {{ t('register.alreadyHaveAccount') }}
          <el-link type="primary" @click="$router.push('/login')">
            {{ t('register.login') }}
          </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { t } from '@/utils/i18n'
import { register, sendSmsCode } from '@/api/auth'
import LanguageSelector from '@/components/LanguageSelector.vue'
import Translate from '@/components/Translate.vue'

const router = useRouter()
const registerFormRef = ref(null)
const loading = ref(false)
const agreeTerms = ref(false)
const isDev = import.meta.env.MODE === 'development'

// 注册表单
const registerForm = reactive({
  username: '',
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
})

// 表单验证规则
const registerRules = computed(() => ({
  username: [
    { required: true, message: t('register.usernameRequired'), trigger: 'blur' },
    { min: 3, max: 20, message: t('register.usernameLength'), trigger: 'blur' }
  ],
  phone: [
    { required: true, message: t('register.phoneRequired'), trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: t('register.phoneInvalid'), trigger: 'blur' }
  ],
  code: [
    { required: true, message: t('register.codeRequired'), trigger: 'blur' },
    { min: 6, max: 6, message: t('register.codeInvalid'), trigger: 'blur' }
  ],
  password: [
    { required: true, message: t('register.passwordRequired'), trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: t('register.confirmPasswordRequired'), trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error(t('register.passwordNotMatch')))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}))

// 验证码按钮相关
const countdown = ref(0)
const codeButtonText = computed(() => {
  if (countdown.value > 0) {
    return `${countdown.value}s`
  }
  return t('register.getCode')
})

// 验证码按钮是否禁用
const codeBtnDisabled = computed(() => {
  return countdown.value > 0 || !registerForm.phone || !/^1[3-9]\d{9}$/.test(registerForm.phone)
})

// 发送验证码
const handleSendCode = async () => {
  try {
    // 调用发送验证码API
    const result = await sendSmsCode({ mobile: registerForm.phone });
    ElMessage.success(t('register.codeSent'));

    // 如果接口返回了验证码（开发模式），自动填充到输入框
    if (result.data && result.data.code) {
      registerForm.code = result.data.code;
    }

    // 倒计时
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {

    // 获取详细的错误信息
    let errorMsg = t('register.codeSendFailed');
    if (error.response && error.response.data) {
      if (error.response.data.message) {
        errorMsg = error.response.data.message;
      } else if (error.response.data.msg) {
        errorMsg = error.response.data.msg;
      }
    } else if (typeof error === 'object' && error.message) {
      errorMsg = error.message;
    }

    ElMessage.error(errorMsg);
  }
}

// 处理注册
const handleRegister = async () => {
  if (!agreeTerms.value) {
    ElMessage.warning(t('register.agreeTermsFirst') || '请阅读并同意服务条款和隐私政策')
    return
  }

  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      // 构建请求数据
      const requestData = {
        username: registerForm.username,
        phone: registerForm.phone,
        code: registerForm.code,
        password: registerForm.password
      };

      try {
        // 调用注册API
        const res = await register(requestData);

        if (res.code === 200) {
          ElMessage.success(t('register.success'))
        } else {
          if (res.msg === '手机号已被注册') {
            ElMessage.error(t('register.failed.phoneRegistered'))
          } else if (res.msg === '用户名已存在'){
            ElMessage.error(t('register.failed.usernameExists'))
          } else if (res.msg === '验证码不正确或已过期'){
            ElMessage.error(t('register.failed.codeInvalid'))
          } else {
            ElMessage.error(t('register.failed'))
          }
        }

        // 延迟跳转到登录页
        setTimeout(() => {
          router.push('/login')
        }, 1500)
      } catch (error) {

        // 获取更详细的错误信息
        let errorMessage = t('register.failed');

        // 尝试从不同来源获取错误信息
        if (error.response) {

          // 如果错误响应包含具体信息，则使用该信息
          if (error.response.data && error.response.data.message) {
            errorMessage = error.response.data.message;
          } else if (error.response.data && error.response.data.msg) {
            errorMessage = error.response.data.msg;
          }
        } else if (typeof error === 'object') {
          if (error.message) {
            errorMessage = error.message;
          } else if (error.msg) {
            errorMessage = error.msg;
          }
        }

        // 尝试直接使用fetch API发送请求，作为替代方法
        if (error.message && error.message.includes('Network Error')) {
          try {
            const response = await fetch('/saas/auth/register', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify(requestData)
            });

            // 尝试解析响应
            const responseText = await response.text();
            let data;
            try {
              data = JSON.parse(responseText);
            } catch (e) {
              data = { message: responseText };
            }

            if (response.ok) {
              ElMessage.success(t('register.success'));
              setTimeout(() => router.push('/login'), 1500);
              return;
            } else {
              errorMessage = data.message || data.msg || errorMessage;
            }
          } catch (fetchError) {
          }
        }

        ElMessage.error(errorMessage);
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.warning(t('register.formInvalid') || '请检查表单填写是否正确');
    }
  })
}

</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变绿色背景 */
  background: linear-gradient(135deg, #ccfdff 0%, #d3e9fb 30%, #95ccfb 65%, #85c6fd 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative; /* 用于放置绝对定位的背景层 */
}

.login-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1920px; /* 限制最大宽度 */
  background-color: transparent; /* 透明以展示背景渐变 */
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  z-index: 1; /* 确保内容在背景层之上 */
}

.brand-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent; /* 透明以展示背景渐变 */
  padding: 2vh 3vw 1.5vh 3vw; /* 使用视口单位 */
  min-height: 650px;
  border-right: none;
  /* 为右侧绝对定位的登录表单预留空间，避免遮挡 */
  padding-right: calc(clamp(350px, 35vw, 500px) + clamp(24px, 2.5vw, 40px));
}

/* 背景动态下坠小团（圆点/气泡） */
.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bg-layer .drop {
  position: absolute;
  top: -10%;
  width: 26px;
  height: 26px;
  border-radius: 4px; /* 方块微圆角 */
  background: transparent; /* 线条样式：不填充 */
  border: 2px solid rgba(255, 255, 255, 0.45); /* 白色描边 */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25); /* 轻微发光 */
  filter: none;
  animation: drop-fall 12s linear infinite; /* 左到右的对角下坠 */
}

/* 通过 nth-child 随机化大小、位置、速度与延迟 */
.bg-layer .drop:nth-child(1)  { left: 5%;   width: 14px; height: 14px;  animation-duration: 11s; animation-delay: -2s; }
.bg-layer .drop:nth-child(2)  { left: 15%;  width: 20px; height: 20px;  animation-duration: 13s; animation-delay: -6s; }
.bg-layer .drop:nth-child(3)  { left: 25%;  width: 40px; height: 40px;  animation-duration: 10s; animation-delay: -4s; }
.bg-layer .drop:nth-child(4)  { left: 35%;  width: 28px; height: 28px;  animation-duration: 14s; animation-delay: -8s; }
.bg-layer .drop:nth-child(5)  { left: 45%;  width: 18px; height: 18px;  animation-duration: 12s; animation-delay: -1s; }
.bg-layer .drop:nth-child(6)  { left: 55%;  width: 22px; height: 22px;  animation-duration: 15s; animation-delay: -5s; }
.bg-layer .drop:nth-child(7)  { left: 65%;  width: 20px; height: 20px;  animation-duration: 9s;  animation-delay: -7s; }
.bg-layer .drop:nth-child(8)  { left: 75%;  width: 26px; height: 26px;  animation-duration: 13s; animation-delay: -3s; }
.bg-layer .drop:nth-child(9)  { left: 85%;  width: 16px; height: 16px;  animation-duration: 11s; animation-delay: -9s; }
.bg-layer .drop:nth-child(10) { left: 50%;  width: 32px; height: 32px;  animation-duration: 16s; animation-delay: -11s; }
.bg-layer .drop:nth-child(11) { left: 12%;  width: 24px; height: 24px;  animation-duration: 12.5s; animation-delay: -10s; }
.bg-layer .drop:nth-child(12) { left: 92%;  width: 18px; height: 18px;  animation-duration: 10.5s; animation-delay: -12s; }

@keyframes drop-fall {
  0% {
    /* 从元素自身位置偏左、偏上的位置开始 */
    transform: translate(-12vw, -5vh) rotate(0deg) scale(1);
    opacity: 0.75;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    /* 终点：向右下方移动较长距离，形成左->右的下坠轨迹 */
    transform: translate(32vw, 120vh) rotate(12deg) scale(1.02);
    opacity: 0;
  }
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.logo-image {
  max-width: 100%;
  height: auto;
  max-height: clamp(60px, 8vh, 120px); /* 响应式高度 */
}

.brand-title {
  font-size: clamp(24px, 3vw, 42px); /* 响应式字体大小 */
  font-weight: bold;
  margin-bottom: 1vh;
  color: #333;
  margin-left: clamp(30px, 5vw, 80px); /* 响应式边距 */
}

.brand-subtitle {
  font-size: clamp(14px, 1.5vw, 20px); /* 响应式字体大小 */
  color: #888;
  margin-bottom: 2vh;
  margin-left: clamp(30px, 5vw, 80px); /* 响应式边距 */
}

.feature-tabs {
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  grid-template-columns: 1fr; /* 默认单列 */
  gap: clamp(14px, 1.6vh, 20px);
  max-width: clamp(420px, 36vw, 640px);
  margin-left: clamp(30px, 5vw, 80px); /* 与标题左对齐 */
  align-items: stretch; /* 防止列高错乱 */
  align-content: start; /* 避免栅格拥挤重叠 */
  grid-auto-rows: auto;
  grid-auto-flow: row;
  position: relative;
  isolation: isolate; /* 建立新叠层上下文，避免意外覆盖 */
}

.feature-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1vh, 10px);
  padding: clamp(16px, 2vh, 22px) clamp(16px, 2vw, 22px);
  background: #ffffff;
  color: #2b3640;
  border-radius: 12px;
  position: relative;
  width: calc(100% - 20px);
  margin: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  z-index: 0; /* 卡片彼此不叠放 */
  overflow: hidden; /* 文本不超出 */
  contain: layout paint; /* 隔离布局与绘制，提高稳定性 */
  margin-bottom: clamp(18px, 1.2vh, 24px);

  background: linear-gradient(135deg, #f5f7fa, #e6f7ff);
  border: 1px solid rgba(0,0,0,0.06);
}

/* 卡片1 - 蓝色渐变 */
.feature-tab:nth-child(1) {
  background: linear-gradient(135deg, #e6f7ff, #d1ebff);
  border: 1px solid rgba(24, 144, 255, 0.15);
}

/* 卡片2 - 橙色渐变 */
.feature-tab:nth-child(2) {
  background: linear-gradient(135deg, #fff7e6, #ffe8cc);
  border: 1px solid rgba(255, 152, 0, 0.15);
}

/* 卡片3 - 绿色渐变 */
.feature-tab:nth-child(3) {
  background: linear-gradient(135deg, #e6ffed, #d1f5d9);
  border: 1px solid rgba(38, 166, 154, 0.15);
}

/* 卡片4 - 紫色渐变 */
.feature-tab:nth-child(4) {
  background: linear-gradient(135deg, #f3e6ff, #e6d1ff);
  border: 1px solid rgba(126, 87, 194, 0.15);
}

.feature-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.feature-tab:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(24, 144, 255, 0.22);
}

/* 卡片1悬停效果 */
.feature-tab:nth-child(1):hover {
  box-shadow: 0 12px 24px rgba(24, 144, 255, 0.15);
}

/* 卡片2悬停效果 */
.feature-tab:nth-child(2):hover {
  box-shadow: 0 12px 24px rgba(255, 152, 0, 0.15);
}

/* 卡片3悬停效果 */
.feature-tab:nth-child(3):hover {
  box-shadow: 0 12px 24px rgba(38, 166, 154, 0.15);
}

/* 卡片4悬停效果 */
.feature-tab:nth-child(4):hover {
  box-shadow: 0 12px 24px rgba(126, 87, 194, 0.15);
}

/* 左侧彩色细边条，增强区分度 */
.feature-tab::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: linear-gradient(135deg, #e6f7ff, #d1ebff);
}
.feature-tab:nth-child(2)::after { background: linear-gradient(135deg, #fff7e6, #ffe8cc); }
.feature-tab:nth-child(3)::after { background: linear-gradient(135deg, #e6ffed, #d1f5d9); }
.feature-tab:nth-child(4)::after { background: linear-gradient(135deg, #f3e6ff, #e6d1ff); }

/* 角标编号（01-04） */
.feature-tab::before {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7785;
  background: rgba(0,0,0,0.04);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
}
/*
.feature-tab:nth-child(1)::before { content: "01"; }
.feature-tab:nth-child(2)::before { content: "02"; }
.feature-tab:nth-child(3)::before { content: "03"; }
.feature-tab:nth-child(4)::before { content: "04"; }
 */

/* 目前模板未使用图标容器，保留占位样式以便将来启用 */
.tab-icon { display: none; }

/* 发光描边 */
.tab-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 24px rgba(255,255,255,0.3) inset;
  pointer-events: none;
}

/* 内层波纹 */
.inner-wave {
  width: clamp(8px, 0.9vw, 10px);
  height: clamp(8px, 0.9vw, 10px);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0.65; }
  100% { transform: scale(1); opacity: 0.9; }
}

.tab-text {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  color: #2b3640;
  letter-spacing: 0.2px;
  line-height: 1.6;
}

/* ≥1200px时，改为两列栅格，更工整 */
@media screen and (min-width: 1200px) {
  .feature-tabs {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    max-width: clamp(600px, 44vw, 880px);
    gap: clamp(20px, 2.5vh, 30px);
  }

  .feature-tab {
    width: calc(100% - 15px); /* 减少宽度以创建右边距 */
    margin-right: 15px; /* 新增右边距 */
  }
}

.brand-footer {
  margin-top: 2vh; /* 减少上边距，为特性标签让出空间 */
  padding-bottom: 1vh;
  margin-bottom: 0;
  color: #888;
  font-size: clamp(14px, 1.5vw, 20px); /* 响应式字体大小 */
  text-align: left;
  position: relative;
  left: clamp(30px, 5vw, 80px); /* 响应式左偏移 */
  top: clamp(-20px, -2vh, -40px); /* 减少向上偏移，避免与特性标签重叠 */
}

/* 注册表单容器 */
.register-form-section {
  width: clamp(350px, 30vw, 500px);
  padding: clamp(18px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.40); /* 40%不透明度 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(8px); /* Safari支持 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
  position: absolute;
  right: 150px; /* 离右侧保留一点距离 */
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 10;
}

/* 注册表单 - 紧凑化表单间距与文字尺寸 */
.register-form-section :deep(.el-form) {
  gap: 0;
}
.register-form-section :deep(.el-form-item) {
  margin-bottom: 10px;
}
.register-form-section :deep(.el-form-item__label) {
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.register-form-section :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  box-shadow: none;
}
.register-form-section :deep(.el-input__wrapper:hover) {
  border-color: rgba(24, 144, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.85);
}
.register-form-section :deep(.el-input__wrapper.is-focus) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.9);
}
.register-form-section :deep(.el-input__inner) {
  background: transparent;
  color: #333;
}

.register-form-section :deep(.el-input__inner::placeholder) {
  color: rgba(51, 51, 51, 0.5);
}
.register-form-section :deep(.el-checkbox__label) {
  font-size: 12px;
}
.register-form-section :deep(.el-link) {
  font-size: 12px;
}

.form-header {
  margin-bottom: 20px;
}

.language-selector {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.welcome-text {
  font-size: clamp(18px, 2.5vw, 28px); /* 响应式字体大小 */
  font-weight: bold;
  color: #333;
  margin-bottom: clamp(20px, 3vh, 40px); /* 响应式下边距 */
  text-align: center;
}

.login-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: clamp(15px, 2vh, 25px); /* 响应式下边距 */
}

.tab-item {
  padding: clamp(8px, 1vh, 12px) 0; /* 响应式内边距 */
  margin-right: clamp(15px, 2vw, 25px); /* 响应式右边距 */
  cursor: pointer;
  position: relative;
  font-size: clamp(14px, 1.5vw, 18px); /* 响应式字体大小 */
  color: #888;
}

.tab-item.active {
  color: #1890ff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

.login-button {
  width: 100%;
  height: clamp(45px, 6vh, 55px); /* 响应式高度 */
  font-size: clamp(14px, 1.5vw, 18px); /* 响应式字体大小 */
}

/* 注册提交按钮样式（与登录按钮一致） */
.register-button {
  width: 100%;
  height: clamp(45px, 6vh, 55px);
  font-size: clamp(14px, 1.5vw, 18px);
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 2px;
  color: #888;
  font-size: clamp(14px, 1.2vw, 16px);
}

.form-footer :deep(.el-link) {
  font-size: inherit !important;
}

.forgot-password {
  cursor: pointer;
}

.forgot-password:hover {
  color: #1890ff;
}

.code-input-wrapper {
  display: flex;
}

.send-code-btn {
  margin-left: 10px;
  width: clamp(100px, 12vw, 140px); /* 响应式宽度 */
}

/* 媒体查询 - 针对不同屏幕尺寸优化 */

/* 小屏幕笔记本 (1366x768 及以下) */
@media screen and (max-width: 1366px) {
  .login-wrapper {
    max-width: 1366px;
  }

  .brand-section {
    padding: 1.5vh 2.5vw 1vh 2.5vw;
    min-height: 600px;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(320px, 32vw, 420px) + clamp(20px, 2vw, 36px));
  }

  .brand-title {
    font-size: clamp(20px, 2.5vw, 32px);
    margin-left: clamp(25px, 4vw, 60px);
  }

  .brand-subtitle {
    font-size: clamp(12px, 1.3vw, 16px);
    margin-left: clamp(25px, 4vw, 60px);
  }

  .feature-tabs {
    margin-top: clamp(40px, 5vh, 60px); /* 小屏幕下适当减少向下移动距离 */
  }

  .feature-tab {
    padding: clamp(12px, 1.5vh, 20px) clamp(12px, 1.5vw, 20px);
    margin-left: clamp(-25px, -2.5vw, -40px);
    padding-left: clamp(35px, 4vw, 60px);
    width: calc(100% - 15px); /* 小屏幕下适中的右边距 */
    margin-right: 15px; /* 新增右边距 */
  }

  .tab-text {
    font-size: clamp(14px, 1.8vw, 20px);
  }


  .register-form-section {
    width: clamp(380px, 28vw, 480px);
    padding: clamp(20px, 2.2vw, 40px);
    right: clamp(60px, 3vw, 120px);
  }

  .welcome-text {
    font-size: clamp(16px, 2.2vw, 24px);
    margin-bottom: clamp(15px, 2.5vh, 30px);
  }
}

/* 标准桌面屏幕 (1367px - 1920px) */
@media screen and (min-width: 1367px) and (max-width: 1920px) {
  .login-wrapper {
    max-width: 1920px;
  }

  .brand-section {
    padding: 2vh 3vw 1.5vh 3vw;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(380px, 30vw, 480px) + clamp(24px, 2.5vw, 40px));
  }

  .register-form-section {
    width: clamp(340px, 30vw, 440px);
    right: clamp(80px, 3.5vw, 150px); /* 中等屏幕最大到150px */
  }
}

/* 大屏幕显示器 (1921px 及以上) */
@media screen and (min-width: 1921px) {
  .login-wrapper {
    max-width: 2560px;
  }

  .brand-section {
    padding: 2.5vh 2.5vw 2vh 2.5vw;
    /* 保留为右侧表单预留的空间 */
    padding-right: calc(clamp(420px, 25vw, 550px) + clamp(28px, 2.5vw, 48px));
  }

  .brand-title {
    font-size: clamp(32px, 2.5vw, 48px);
    margin-left: clamp(60px, 4vw, 100px);
  }

  .brand-subtitle {
    font-size: clamp(16px, 1.2vw, 24px);
    margin-left: clamp(60px, 4vw, 100px);
  }

  .feature-tabs {
    margin-top: clamp(40px, 6vh, 72px);
  }

  /* 统一大屏下卡片为网格内的常规方块，避免溢出重叠 */
  .feature-tab {
    padding: clamp(18px, 2vh, 26px);
    width: calc(100% - 25px); /* 大屏幕下更大的右边距 */
    margin-right: 25px; /* 新增右边距 */
  }

  .tab-text {
    font-size: clamp(18px, 1.2vw, 24px);
  }
}

.register-form-section {
  width: clamp(420px, 24vw, 500px);
  padding: clamp(22px, 2.2vw, 40px);
  right: clamp(140px, 2.8vw, 150px); /* 大屏幕最大到150px */
}

.welcome-text {
  font-size: clamp(22px, 2vw, 32px);
  margin-bottom: clamp(25px, 3vh, 45px);
}

.login-button {
  height: clamp(50px, 5vh, 60px);
  font-size: clamp(16px, 1.3vw, 20px);
}

.register-button {
  height: clamp(50px, 5vh, 60px);
  font-size: clamp(16px, 1.3vw, 20px);
}


/* 超高分辨率优化 (2560x1440 及以上) */
@media screen and (min-width: 2560px) {
  .brand-title {
    font-size: clamp(36px, 2.2vw, 52px);
  }

  .brand-subtitle {
    font-size: clamp(18px, 1.1vw, 26px);
  }

  .tab-text {
    font-size: clamp(20px, 1.4vw, 30px);
  }

  .welcome-text {
    font-size: clamp(24px, 1.8vw, 36px);
  }
}

/* 垂直空间较小的屏幕优化 */
@media screen and (max-height: 768px) {
  .brand-section {
    min-height: 500px;
    padding: 1vh 3vw 0.5vh 3vw;
  }

  .feature-tabs {
    margin-top: clamp(25px, 3vh, 40px); /* 垂直空间小时减少向下移动距离 */
    gap: 3px;
  }

  .feature-tab {
    padding: clamp(10px, 1.2vh, 18px) clamp(12px, 1.5vw, 20px);
  }

  .brand-footer {
    margin-top: 1.5vh;
    top: clamp(-30px, -3vh, -50px);
  }

  .login-form-section {
    padding: clamp(15px, 2vh, 35px) clamp(20px, 2.5vw, 45px);
  }

  .welcome-text {
    margin-bottom: clamp(10px, 2vh, 25px);
  }

  .login-tabs {
    margin-bottom: clamp(10px, 1.5vh, 20px);
  }
}


</style>